<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keyword" content="">
    <link rel="shortcut icon" href="img/favicon.png">
    <title>APQP微信企业号</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-reset.css">
    <!--external css-->
    <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="assets/toastr-master/toastr.css">
    <link rel="stylesheet" href="assets/bootstrap-fileupload/bootstrap-fileupload.css">
    <link rel="stylesheet" href="assets/bootstrap-datetimepicker/css/datetimepicker.css">
    <!--right slidebar-->
    <link rel="stylesheet" href="css/slidebars.css">
    <!-- Custom styles for this template -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/style-responsive.css">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <script src="assets/toastr-master/toastr.js"></script>
    <![endif]-->
</head>

<body class="has-js">
    <div id="container">
        <!--header start-->
        <header class="header blue-bg">
            <div class="sidebar-toggle-box">
                <i class="fa fa-bars"></i>
            </div>
            <!--logo start-->
            <a href="index.html" class="logo"><span>APQP</span>微信企业号</a>
            <div id="top_menu" class="nav notify-row">
                <a href="index.html" class="btn btn-shadow btn-primary"><i class="fa fa-trophy"></i> APQP</a>
                <a href="enterprise.html" class="btn btn-shadow btn-default"><i class="fa fa-desktop"></i> 企业号</a>
            </div>
            <div class="top-nav">
                <ul class="nav pull-right top-menu">
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <img alt="" src="img/avatar1_small.jpg">
                            <span class="username">管理员</span>
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu extended logout">
                            <div class="log-arrow-up"></div>
                            <li><a href="#"><i class=" fa fa-suitcase"></i>简介</a></li>
                            <li><a href="#"><i class="fa fa-cog"></i> 设置</a></li>
                            <li><a href="#"><i class="fa fa-bell-o"></i> 通知</a></li>
                            <li><a href="login.html"><i class="fa fa-key"></i> 退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </header>
        <!--header end-->
        <!--sidebar start-->
        <aside>
            <div id="sidebar" class="nav-collapse">
                <!-- sidebar menu start-->
                <ul class="sidebar-menu" id="nav-accordion">
                    <li>
                        <a href="index.html">
                            <i class="fa fa-dashboard"></i>
                            <span>工作台</span>
                        </a>
                    </li>
                    <li class="sub-menu">
                        <a href="javascript:;">
                            <i class="fa fa-laptop"></i>
                            <span>菜单管理</span>
                        </a>
                        <ul class="sub">
                            <li><a href="menu.custom.html">自定义菜单</a></li>
                        </ul>
                    </li>
                    <li class="sub-menu">
                        <a href="javascript:;">
                            <i class="fa fa-book"></i>
                            <span>素材管理</span>
                        </a>
                        <ul class="sub">
                            <li><a href="resource.html">素材列表</a></li>
                        </ul>
                    </li>
                    <li class="sub-menu">
                        <a href="javascript:;">
                            <i class="fa fa-cogs"></i>
                            <span>用户管理</span>
                        </a>
                        <ul class="sub">
                            <li><a href="user.list.html">APQP用户列表</a></li>
                        </ul>
                    </li>
                    <li class="sub-menu">
                        <a href="javascript:;" class="active">
                            <i class="fa fa-tasks"></i>
                            <span>消息管理</span>
                        </a>
                        <ul class="sub">
                            <li class="active"><a href="msg.send.html">发消息</a></li>
                            <li><a href="msg.history.html">历史消息</a></li>
                        </ul>
                    </li>
                    <li class="sub-menu">
                        <a href="javascript:;">
                            <i class="fa fa-th"></i>
                            <span>回复管理</span>
                        </a>
                        <ul class="sub">
                            <li><a href="reply.welcomes.html">关注欢迎语</a></li>
                            <li><a href="reply.keyword.html">关键字管理</a></li>
                            <li><a href="reply.unknown.html">未识别回复语</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- sidebar menu end-->
            </div>
        </aside>
        <!--sidebar end-->
        <!--main content start-->
        <section id="main-content">
            <section class="wrapper site-min-height">
                <div class="row">
                    <div class="col-md-9">
                        <section class="panel">
                            <header class="panel-heading">消息发送</header>
                            <div class="panel-body">
                                <form action="">
                                    <div class="form-group">
                                        <label for="">接收人</label>
                                        <input name="receive" id="receive" class="tagsinput" value="杰克,山姆,艾连娜,德瑞克" placeholder="">
                                    </div>
                                    <div class="form-group">
                                        <a href="">[选择素材]</a>
                                    </div>
                                    <div class="form-group">
                                        <label for="">标题</label>
                                        <input type="text" class="form-control" placeholder="请输入标题，标题不多于64个字" max-length="10" required="required"> 0/64
                                    </div>
                                    <div class="form-group">
                                        <label for="">封面</label>
                                        <span class="text-muted">（推荐尺寸：900像素 × 500像素）</span>
                                        <!-- <input type="file" class="form-control"> -->
                                        <div class="fileupload fileupload-new" data-provides="fileupload">
                                            <span class="btn btn-white btn-file">
                                                <span class="fileupload-new"><i class="fa fa-paper-clip"></i> 选择图片</span>
                                            <span class="fileupload-exists"><i class="fa fa-undo"></i> 重新选择</span>
                                            <input type="file" class="default" />
                                            </span>
                                            <span class="fileupload-preview" style="margin-left:5px;"></span>
                                            <a href="#" class="close fileupload-exists" data-dismiss="fileupload" style="float: none; margin-left:5px;"></a>
                                        </div>
                                        <div class="help-block">
                                            <label class="" for="ctc">
                                                <input name="ctc" id="ctc" value="" type="checkbox"> 封面图片显示在正文中
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="">正文</label>
                                        <textarea name="content" id="content" cols="30" rows="10" class="form-control ckeditor">正文内容&hellip;</textarea>
                                    </div>
                                    <div class="form-group">
                                        <label for="">摘要</label>
                                        <span class="text-muted">（选填，如果不填写会默认抓取正文前54个字）</span>
                                        <textarea name="" id="" cols="30" rows="5" class="form-control" placeholder="请输入摘要&hellip;"></textarea>
                                    </div>
                                    <div class="text-center">
                                        <button type="submit" class="btn btn-info">立即发送</button>
                                        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#timing-modal">定时发送</button>
                                    </div>
                                </form>
                            </div>
                        </section>
                    </div>
                    <div class="col-md-3">
                        <section class="panel">
                            <header class="panel-heading">联系人列表</header>
                            <div class="panel-body">
                                <ul class="chat-available-user mb-0">
                                    <li><a href=""><i class="fa fa-circle text-success"></i> 杰克</a></li>
                                    <li><a href=""><i class="fa fa-circle text-success"></i> 山姆</a></li>
                                    <li><a href=""><i class="fa fa-circle text-success"></i> 阿莲娜</a></li>
                                    <li><a href=""><i class="fa fa-circle text-warning"></i> 德瑞克</a></li>
                                    <li><a href=""><i class="fa fa-circle text-muted"></i> 苏利文</a></li>
                                </ul>
                            </div>
                        </section>
                    </div>
                </div>
                <!-- Modal -->
                <div class="modal fade" id="timing-modal" tabindex="-1" role="dialog" aria-labelledby="timing-modal-label">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="timing-modal-label">定时发送</h4>
                            </div>
                            <div class="modal-body">
                                <form action="">
                                    <div class="form-group">
                                        <label for="">选择定时发送时间：</label>
                                        <span class="text-muted">（定时时间不超过7天）</span>
                                        <div class="iconic-input right">
                                            <i class="fa fa-calendar"></i>
                                            <input size="16" type="text" name="time" value="" readonly class="form_datetime form-control" placeholder="yyyy-mm-dd hh:ii">
                                        </div>
                                    </div>
                                    <p>本消息将于今天19:13执行发送操作</p>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary">发送</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </section>
        <!--main content end-->
        <!--footer start-->
        <footer class="site-footer">
            <div class="text-center">
                Copyright © 2016-2017 宙能信息. All rights reserved.
                <a href="#" class="go-top">
                    <i class="fa fa-angle-up"></i>
                </a>
            </div>
        </footer>
        <!--footer end-->
    </div>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.dcjqaccordion.2.7.js" class="include" type="text/javascript"></script>
    <script src="js/jquery.scrollTo.min.js"></script>
    <script src="js/jquery.nicescroll.js" type="text/javascript"></script>
    <script src="js/respond.min.js"></script>
    <script src="assets/toastr-master/toastr.js"></script>
    <script src="assets/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script src="assets/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <!-- tagsinput -->
    <script src="js/jquery.tagsinput.js"></script>
    <script src="assets/bootstrap-fileupload/bootstrap-fileupload.js"></script>
    <script src="assets/ckeditor/ckeditor.js"></script>
    <!--right slidebar-->
    <script src="js/slidebars.min.js"></script>
    <!--common script for all pages-->
    <script src="js/common-scripts.js"></script>
    <!-- <script src="js/form-component.js"></script> -->
    <script>
    $(function() {
        var ti = $(".tagsinput").tagsInput({});
        // console.log(ti)
        CKEDITOR.replace('content');

        $(".form_datetime").datetimepicker({
            language: 'zh-CN',
            format: 'yyyy-mm-dd hh:ii',
            autoclose: true,
            todayBtn: true,
            pickerPosition: "bottom-left"
        });
    });
    </script>
</body>

</html>
